<!--
 * @Author: zulezhe
 * @Date: 2021-01-29 14:52:16
 * @LastEditors: zulezhe
 * @LastEditTime: 2021-02-04 18:23:32
 * @Description: In User Settings Edit
 * @FilePath: \canvas\02-进阶\09.初识贝塞尔.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>初识贝塞尔</title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
      }
      #canvas-container {
        width: 60%;
        height: 90%;
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        align-items: center;
      }
      .header {
        height: 10%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .header .handle-button {
        width: 100px;
        height: 40px;
        border-radius: 4px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
        background: linear-gradient(217deg, #e84393, #e17055);
        color: #fff;
        font-weight: 600;
        transition: all 0.1s cubic-bezier(0.42, 0, 1, 1) 0s;
      }
      .header .handle-button:focus {
        color: yellow;
      }
      .header .handle-button:active {
        transform: scale(1.1);
      }
      .main {
        height: 80%;
        width: 100%;
        border: 1px solid #aaa;
      }
    </style>
  </head>
  <body>
    <div id="canvas-container">
      <div class="header">
        <div class="handle-button" id="handle-button"><span>执行</span></div>
      </div>
      <div class="main" id="main">
        <canvas id="canvas"></canvas>
      </div>
    </div>
    <script>
      /**
       * context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
       * cp1x : 第一个点的x坐标
       * cp1y : 第一个点的y坐标
       * cp2x : 第二个点的x坐标
       * cp2y : 第二个点的y坐标
       * x    : 结束点的x坐标
       * y    : 结束点的y坐标
       */
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");
      canvas.width = document.getElementById("main").offsetWidth;
      canvas.height = document.getElementById("main").offsetHeight;
      // 绘制一定角度的椭圆圆弧
      function bezierCurveTo(context) {
        context.save();
        context.beginPath();
        context.moveTo(50, 50);
        context.fillText("(203,78)", 203, 78);
        context.fillText("(82,150)", 82, 150);
        context.fillText("(250, 100)", 250, 100);
        context.bezierCurveTo(203, 78, 82, 150, 250, 100);
        context.stroke();
        ctx.beginPath();
        ctx.moveTo(75, 25);
        ctx.quadraticCurveTo(25, 25, 25, 62.5);
        ctx.quadraticCurveTo(25, 100, 50, 100);
        ctx.quadraticCurveTo(50, 120, 30, 125);
        ctx.quadraticCurveTo(60, 120, 65, 100);
        ctx.quadraticCurveTo(125, 100, 125, 62.5);
        ctx.quadraticCurveTo(125, 25, 75, 25);
        ctx.stroke();
        context.restore();
      }

      document.getElementById("handle-button").onclick = function () {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        bezierCurveTo(ctx);
      };
    </script>
  </body>
</html>
